/**
 * 一、引入
 * 未使用vue和react之前我们做的DOM操作，DOM的操作非常昂贵，vue和react最大的好处之一，不需要操作DOM，直接操作数据，页面会自发生变更
 * vue是通过Object.defineProperty()+发布与订阅的方式来实现的，在React中就需要操作State
 * 二、State
 * 1、什么State：所谓的状态可以理解为数据变化之后，页面的变现也会随之发生变化的这一种情况称为状态
 * 2、React中的数据来源：
 * 内部（组件内的数据，只能应用于组件的内部):State-->data
 * 外部（是来自外部组件的数据)prop--->prop
 * 3、有状态组件和无状态组件
 * 所谓的有状态组件是指的是使用类组件，无状态组件是使用函数编写的组件
 * 4、操作State的步骤
 * 1）定义State,定义state可以有两种写法
 * 第1步：写在构造函数中
 * 第2步：在render函数中要调用:使用jsx的方式直接调用{this.state.xx}
 * 第3步：更改state
 * this.setState({xx:更新后的值})
 * 5、另外写法
 * (1)定义state
 * 可以写在类中，不在在构造函数
 * state={
 *   xx:值
 * }
 * (2)在render函数中解构赋值
 * render(){
 *   const {xx}=this.state
      return (<>
           <div>{xx}</div>
        <>) 
 * }
   (3) 使用this.setState()来进行数据的更改
 */
import React, { Component } from 'react'
export default class StateDemo extends Component { 
  constructor(){
    super()
  }
  state={
    count:10
  }


  render() {
    const {count}=this.state
    return (
      <div>
        <h1>{count}</h1>
        <button onClick={()=>this.setState({count:this.state.count+1})}>+</button>
      </div>
    )
  }
}
